<!--  -->
<template>
  <div>
    <a-layout id="components-layout-demo-custom-trigger">
      <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
        <div class="logo">
          <img src="@/assets/img/main/logo.png" alt="logo" />
        </div>
        <a-menu theme="dark" mode="inline" :selected-keys="[selectedKey]" @click="handleMenuClick">
          <a-menu-item key="view">
            <a-icon type="home" />
            <span>查看</span>
          </a-menu-item>
          <a-menu-item key="edit">
            <a-icon type="home" />
            <span>录入</span>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>
      <a-layout-content
        :style="{ margin: '0', padding: '16px', background: '#fff',overflowY: 'hidden'}">
        <router-view />
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script>
  export default {
    name: '',
    components: {},
    data() {
      return {
        collapsed: false,
        selectedKey: '',
        userInfo: {}
      }
    },
    watch: {
      $route: {
        immediate: true,
        handler(route) {
          const menuKeyMap = {
            '/destination-main/destination-view': 'view',
            '/destination-main/destination-edit': 'edit',
          }
          this.selectedKey = menuKeyMap[route.path] || ''
        }
      }
    },
    mounted() {},
    methods: {
      handleMenuClick({
        key
      }) {
        const path = {
          'edit': '/destination-main/destination-edit',
          'view': '/destination-main/destination-view',
        } [key]

        if (path && path !== this.$route.path) {
          this.$router.push(path).catch(err => {
            if (err.name !== 'NavigationDuplicated') {
              console.error('导航错误:', err)
            }
          })
        }
      },
    }
  }
</script>

<style scoped>
  #components-layout-demo-custom-trigger {
    height: 100vh;
  }

  #components-layout-demo-custom-trigger .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
  }

  #components-layout-demo-custom-trigger .trigger:hover {
    color: #1890ff;
  }

  .logo {
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #001529;
  }

  .logo img {
    height: 32px;
  }

  .header-right {
    float: right;
    margin-right: 24px;
  }

  .ant-dropdown-link {
    color: rgba(0, 0, 0, 0.65);
  }

  .ant-dropdown-link:hover {
    color: #1890ff;
  }
</style>